<template>
<nav>
    <span class="city">杭州</span>
    <ul>
        <li v-for="item in navList" 
        :key="item.title" 
        :class="{active:item.title==activeTitle}" 
        @click="activeTitle=item.title"
        >
        {{item.title}}
        </li>
    </ul>
    <span class="iconfont icon-sousuo"></span>
</nav>
</template>
<script>
export default{
    data(){
        return{
            navList:[
            {title:'热映'},
            {title:'影院'},
            {title:'待映'},
            {title:'经典电影'},
            ],
            activeTitle:'热映'
        }
    }
}
</script>
<style lang="less" scoped>
nav{
    width: 100%;
    height: 46px;
    background-color: #fff;
    border-bottom: 1px solid @border-color;
    display: flex;
    .city{
    width: 62px;
    height: 100%;
    .center();
    font-size:@m-font;
}
ul{
    flex: 1;
    display: flex;
    padding: 0 20px;
    li{
        flex:2;
        font-size: @m-font;
        .center();
        &:last-child{
            flex: 3;
        }
    }
    .active{
        font-weight: 900;
        color:#000;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            width: 20px;
            height: 3px;
            border-radius: 1.5;
            background-color: @theme-color;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
.iconfont{
    width: 45px;
    height: 100%;
    .center();
    color: @theme-color;
    font-size: @xl-font;
}
}
</style>